<!DOCTYPE html>
<html lang="en">
<head>
    <title>Stockfish for chess-console</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css"/>
    <link rel="stylesheet" href="./assets/styles/screen.css"/>
    <!-- The following two lines make it compatible to browsers without support of ES6 Modules, modern browser ignore them -->
    <script nomodule src="./node_modules/browser-es-module-loader/dist/babel-browser-build.js"></script>
    <script nomodule src="./node_modules/browser-es-module-loader/dist/browser-es-module-loader.js"></script>
</head>
<body>
<div class="container-fluid">
    <h1>Stockfish for <a href="https://github.com/shaack/chess-console">chess-console</a></h1>
    <div id="console-container" class="mb-3"></div>
    <form>
        <div class="input-group mb-4">
            <label for="fenInput" class="sr-only">FEN</label>
            <div class="input-group-prepend">
                <button id="fenButton" class="btn btn-outline-primary" type="button">Init with FEN</button>
            </div>
            <input id="fenInput" class="form-control" placeholder="FEN"
                   value="ppppkppp/pppppppp/pppppppp/pppppppp/8/8/8/RNBQKBNR w KQ - 0 1"/>
        </div>
    </form>
    <h3>Repositories and further information on GitHub</h3>
    <dl>
        <dt>the Stockfish player for chess-console</dt>
        <dd><a href="https://github.com/shaack/chess-console-stockfish">chess-console-stockfish</a></dd>
        <dt>The framework for playing chess in a website</dt>
        <dd><a href="https://github.com/shaack/chess-console">chess-console</a></dd>
        <dt>the SVG rendered board used in chess-console</dt>
        <dd><a href="https://github.com/shaack/cm-chessboard">cm-chessboard</a></dd>
        <dt>The Stockfish player used online at chessmail</dt>
        <dd><a href="https://www.chessmail.eu/pages/chess-computer.html">chessmail.eu</a>
        <dt>The chess computer engine in JavaScript (External)</dt>
        <dd><a href="https://github.com/nmrugg/stockfish.js">stockfish.js</a>
        </dd>
    </dl>
    <p>
        copyright &copy; <a href="https://shaack.com">shaack.com</a> engineering.<br/>
        Source code license: <a href="https://github.com/shaack/chess-console/blob/master/LICENSE">MIT</a>.
        License for the Sounds: <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>. License of the SVG
        pieces <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC BY-SA 3.0</a>.
    </p>
</div>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script type="module">

    import {ChessConsole} from "./lib/chess-console/ChessConsole.js"
    import {LocalPlayer} from "./lib/chess-console/players/LocalPlayer.js"
    import {Board} from "./lib/chess-console/components/Board/Board.js"
    import {GameStateOutput} from "./lib/chess-console/components/GameStateOutput.js"
    import {History} from "./lib/chess-console/components/History.js"
    import {CapturedPieces} from "./lib/chess-console/components/CapturedPieces.js"
    import {HistoryControl} from "./lib/chess-console/components/HistoryControl.js"
    import {Persistence} from "./lib/chess-console/components/Persistence.js"
    import {Sound} from "./lib/chess-console/components/Sound.js"

    import {StockfishGameControl} from "./src/chess-console-stockfish/StockfishGameControl.js"
    import {StockfishPlayer} from "./src/chess-console-stockfish/StockfishPlayer.js"
    import {StockfishStateView} from "./src/chess-console-stockfish/StockfishStateView.js"
    import {I18n} from "./lib/cm-web-modules/i18n/I18n.js"

    const i18n = new I18n()
    i18n.load({
        de: {
            playerName: "Spieler"
        },
        en: {
            playerName: "Player"
        }
    })
    const chessConsole = new ChessConsole(
        document.getElementById("console-container"),
        {name: i18n.t("playerName"), type: LocalPlayer},
        {
            name: "Stockfish", type: StockfishPlayer, props: {
                worker: "./ext/stockfish.js",
                book: "./assets/openings.bin",
                level: 2,
                debug: true
            }
        },
        {
            soundSpriteFile: "./assets/sounds/chess_console_sounds.mp3",
            chessboardSpriteFile: "./assets/images/chessboard-sprite.svg",
            savePrefix: "Stockfish"
        })
    chessConsole.addComponent(Board).then(() => {
        chessConsole.addComponent(Persistence)
            .then((component) => component.load())
    })
    chessConsole.addComponent(History)
    chessConsole.addComponent(HistoryControl)
    chessConsole.addComponent(CapturedPieces)
    chessConsole.addComponent(StockfishGameControl, {
        player: chessConsole.opponent
    })
    chessConsole.addComponent(StockfishStateView, {
        player: chessConsole.opponent
    })
    chessConsole.addComponent(GameStateOutput)
    chessConsole.addComponent(Sound)

    document.getElementById("fenButton").addEventListener("click", () => {
        const fen = document.getElementById("fenInput").value
        const pgn = `[SetUp "1"]
[FEN "${fen}"]`
        chessConsole.initGame({
            pgn: pgn
        })
    })

</script>
</body>
</html>